<template>
  <ContentDetailWrap :title="t('inventory.detail')">
    <template #header>
      <BaseButton @click="go(-1)">
        {{ t('common.back') }}
      </BaseButton>
    </template>
    <!--    回显-->
    <Descriptions class="m-b-50px" :schema="detailSchema" :data="descriptionsRow" />
  </ContentDetailWrap>
</template>
<script setup lang="tsx">
import { Descriptions, type DescriptionsSchema } from '@/components/Descriptions'
import { ContentDetailWrap } from '@/components/ContentDetailWrap'
import { getDetailApi, getEnumApi } from '@/api/market/markSocialMediaAccount'
import { ElTag } from 'element-plus'

const { t } = useI18n()
const { push, go } = useRouter()
const { query } = useRoute()

const channelList = ref<Array<Record<string, any>>>([])
const countryList = ref<Array<Record<string, any>>>([])
const languageList = ref<Array<Record<string, any>>>([])
const groupList = ref<Array<Record<string, any>>>([])
const statusList = ref<Array<Record<string, any>>>([
  { label: '启用', value: 1 },
  { label: '禁用', value: 0 }
])

const descriptionsRow = ref<Record<string, any>>({})
const detailSchema = ref<DescriptionsSchema[]>([
  {
    field: 'id',
    label: t('market.markSocialMediaAccount.serialNumber')
  },
  {
    field: 'channel_id',
    label: t('market.markSocialMediaAccount.channel'),
    slots: {
      default: (data: Record<string, any>) => {
        return <span>{useEnumeratePicker(channelList.value, data.channel_id)}</span>
      }
    }
  },
  {
    field: 'account_group_id',
    label: t('market.markSocialMediaAccount.group'),
    slots: {
      default: (data: Record<string, any>) => (
        <span>{useEnumeratePicker(groupList.value, data.account_group_id)}</span>
      )
    }
  },
  {
    field: 'account',
    label: t('market.markSocialMediaAccount.account')
  },
  // {
  //   field: 'pass',
  //   label: t('market.markSocialMediaAccount.password')
  // },
  {
    field: 'windows_id',
    label: t('market.markSocialMediaAccount.windowId')
  },
  {
    field: 'appkey',
    label: t('market.markSocialMediaAccount.appKey')
  },
  // {
  //   field: 'secret',
  //   label: t('market.markSocialMediaAccount.secret')
  // },
  {
    field: 'prompt',
    label: t('market.markSocialMediaAccount.promptWords')
  },
  {
    field: 'language',
    label: t('market.markSocialMediaAccount.language'),
    slots: {
      default: (data: Record<string, any>) => {
        return <span>{useEnumeratePicker(languageList.value, data.language)}</span>
      }
    }
  },
  {
    field: 'country',
    label: t('market.markSocialMediaAccount.country'),
    slots: {
      default: (data: Record<string, any>) => {
        return <span>{useEnumeratePicker(countryList.value, data.country)}</span>
      }
    }
  },
  {
    field: 'status',
    label: t('market.markSocialMediaAccount.status'),
    slots: {
      default: (data: Record<string, any>) => (
        <ElTag type={data.status === 1 ? 'success' : 'danger'}>
          {useEnumeratePicker(statusList.value, data.status)}
        </ElTag>
      )
    }
  },
  {
    field: 'creator',
    label: t('system.marketChannel.createdBy')
  },
  {
    field: 'create_time',
    label: t('system.marketChannel.creationTime')
  },
  {
    field: 'updater',
    label: t('system.marketChannel.updater')
  },
  {
    field: 'update_time',
    label: t('system.marketChannel.updatedTime')
  }
])

//根据接口枚举匹配出中文名称
const useEnumeratePicker = (
  enumList: any[],
  field: string | number,
  key?: string,
  value?: string
) => {
  if (!enumList) return
  const matchItem =
    enumList.find((item: Record<string, any>) => item[value ?? 'value'] === field) || {}
  return matchItem[key ?? 'label'] || ''
}

//获取枚举
const getDropDownBoxInfo = async () => {
  const resp = await getEnumApi({ field: 'all' })
  channelList.value = resp.data.channel
  countryList.value = resp.data.country
  languageList.value = resp.data.language
  groupList.value = resp.data.account_group
}

const getDetail = async () => {
  const resp = await getDetailApi(query.id as string)
  descriptionsRow.value = resp.data
}

onMounted(() => {
  getDropDownBoxInfo()
  getDetail()
})
</script>
<style lang="less" scoped></style>
